<template>
  <el-dialog v-model="dialogFormVisible"
      @close="close"
      :title="title"  draggable>
      <el-form
          ref="dialogForm"
          :model="datalist">
          <el-form-item>
              <slot name="upload"></slot>
          </el-form-item>
          <el-form-item
              v-for="(v, k) in datalist"
              :key="k"
              :label="v.label"
              label-width="80px"
              :prop="(k + '.value')"
              :rules="{
                  required: true,
                  trigger: 'blur',
                  message: v.label + '不能为空'
              }">
              <el-input v-model="v.value" autocomplete="off" />
          </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
              <el-button @click="cancel(dialogForm)">取消</el-button>
              <el-button @click="confirm(dialogForm)" type="primary">
                  确定
              </el-button>
          </span>
      </template>
  </el-dialog>
</template>
<script setup>

import { ref, watchEffect, toRefs } from "vue"
//想法:
//1.根据传入的数据,自动创建出from表单元素,现在默认使用input
//2.表单需要具备能够检验属性的功能
//3.表单通过和不通过,可以回调对应的方法
//4.控制显示隐藏的属性
//5.控制labelWidth的属性
//声明props

//dialog使用说明
//属性:
//1. Visible:Boolean
//2.datalist:Object 表单的数据 {name:{lable:"item的描述",value:"对应的值"}}
//3.formLabelWidth:Stirng label的宽度
//4.title:String dialog的标题

//事件:
//validateSuccess 点击确定按钮,表单校验通过之后触发,回传一个form实例引用
//dialogCancel 点击取消按钮 触发的事件
//clsed dialog被关闭的时候触发的事件 
let props = defineProps({
  //dialog标题
  title: {
      type: String,
      default() {
          return '增加学员信息'
      }
  },
  //控制表单显示隐藏的
  Visible: {
      type: Boolean,
      default() {
          return false
      }
  },
  //弹窗表单中的数据来源
  datalist: {
      type: Object,
      default() {
          return {}
      }
  },
  formLabelWidth: {
      type: String,
      default() {
          return "0px"
      }
  }

})

//声明表单校验通过之后的回调
let emits = defineEmits(['dataVaildatasu', 'dialogCancel', 'closed'])

//dialogFromVisible的初始值,定义为传递下来的初始值
// console.log(props.Visible)
let dialogFormVisible = ref(false)

//使用watchEffect侦听visible props的滨化
let { Visible,datalist} = toRefs(props)
//实时侦听visible props的变化,控制dialog的显示或者隐藏
watchEffect(() => {
  // console.log(Visible.value)
  dialogFormVisible.value = Visible.value
})

//点击取消

let cancel = (dialogForm) => {
  emits('dialogCancel',dialogForm)
}
//点击确定
//声明一个ref引用dialog的结构
let dialogForm = ref()
let confirm = (form) => {
  form.validate(valid => {
      if (valid) {
          //表单校验通过
          emits('dataVaildatasu',form)
      } else {
          //表单校验不通过
      }
  })
}
//diag被关闭的时候触发的事件
let close = () => {
  emits('closed')
}


</script>


<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
